<template>
    <div class="colorfulColor">
        <button v-on:click="start" v-show="!userInfo.start">starGame</button>
        <p class="scoresBox" v-show="userInfo.start">
            <span>分数：
                <span>{{userInfo.scores.scores}}</span>
            </span>
            <span>机会：
                <span>{{userInfo.scores.chances}}</span>
            </span>
            <span>时间：
                <span>{{userInfo.scores.time}}</span>
            </span>
        </p>
        <div class="colorfulBox" v-show="userInfo.start">
            <transition-group name="list-complete" tag="p">
                <span v-for="item in userInfo.items" v-bind:key="item" class="list-complete-item" @touchend="MyChoose">
                    {{ userInfo.level+1 }}
                </span>
            </transition-group>
        </div>
        <div class="littleIntro" v-show="!userInfo.start">
            {{ userInfo.littleInfo }}
        </div>

        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 :src="backgroundMp3.song" style="display:none"></iframe>
        <!-- <audio v-if="userInfo.buttonClick" :src="buttonMp3" autoplay loop></audio> -->
    </div>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                backgroundMp3:{
                    song:null,
                    playTime:null,
                },
                Mp3Array:[
                    {
                        song:"//music.163.com/outchain/player?type=2&id=516657140&auto=1&height=66",
                        time:230
                    },
                    {
                        song:'//music.163.com/outchain/player?type=2&id=523251474&auto=1&height=32',
                        time:230
                    },{
                        song:'//music.163.com/outchain/player?type=2&id=523251365&auto=1&height=66',
                        time:190
                    },{
                        song:'//music.163.com/outchain/player?type=2&id=471565865&auto=1&height=66',
                        time:310
                    }
                ],
                userInfo: {
                    items: [],        //变化的数组
                    nextNum: 16,      //key
                    level: 0,         //第几关
                    firstChange:20,   //初始色差  越大月容易
                    littleInfo:'to find the different color ',    //介绍

                    chosen:{
                        choosenNumsArray:['30%','36%','45%','55%','63%','72%','78%'],  //colorfulBox的width对应3*3到9*9
                    },
                    scores: {
                        scores: 0,   //分数
                        chances: 5,  //机会(生命)
                        time: 10,    //剩余时间(s)
                        rightAnswer:null,  //正确的
                    },
                    timeSet:null,     //定时器
                    start: false,     //是否点击开始
                    buttonClick:false,  //是否点击
                },
            }
        },
        components: {

        },
        methods: {
            randomIndex: function () {
                return Math.floor(Math.random() * this.userInfo.items.length)
            },
            add(times) {
                var times = times || 36
                for (let i = 0; i < times; i++) {
                    this.userInfo.items.splice(this.randomIndex(), 0, this.userInfo.nextNum++)
                }
                 var move=setInterval(()=>{
                    this.shuffle()
                    this.changeColor()
                },200)
                setTimeout(()=>{
                    this.changeColor()
                    clearInterval(move)
                },1000)
            },
            remove: function (times) {
                var times = times || 36
                for (let i = 0; i < times; i++) {
                    this.userInfo.items.splice(this.randomIndex(), 1)
                }
               
            },
            shuffle: function () {
                this.userInfo.items = this.userInfo.items.sort(function () { return 0.5 - Math.random() })
            },

            // find difference
            MyChoose(){
                // if(a)clearTimeout(a)
                // this.userInfo.buttonClick=true
                // var a= setTimeout(()=>{
                //     this.userInfo.buttonClick=false
                // },10)
                if($(event.target)[0].style.background==this.userInfo.scores.rightAnswer){
                    console.log("you're right")
                    this.userInfo.level++
                    this.userInfo.firstChange--
                    this.userInfo.scores.scores+=this.userInfo.level
                    this.userInfo.scores.chances+= this.userInfo.level
                    this.userInfo.scores.time=(this.userInfo.level*2+10)>30?30:(this.userInfo.level*2+10)
                    // this.remove((this.userInfo.level+2)*(this.userInfo.level+2))
                    this.timeflying()
                    this.userInfo.items=[]
                    this.add((this.userInfo.level>6?9:(this.userInfo.level+3))*(this.userInfo.level>6?9:(this.userInfo.level+3)))
                    
                }else{
                    this.userInfo.scores.chances--
                    if(this.userInfo.scores.chances==0){
                        clearInterval(this.userInfo.timeSet)
                        this.userInfo.littleInfo=`i'm so sorry,chances're over,your scores're ${this.userInfo.scores.scores}`
                        this.userInfo.start=!this.userInfo.start
                    }
                }
            },

            changeColor(){
                $('.colorfulBox').css({
                    width:this.userInfo.chosen.choosenNumsArray[this.userInfo.level],
                })
                var r = Math.floor(Math.random() * 256); //随机生成256以内r值
                var g = Math.floor(Math.random() * 256); //随机生成256以内g值
                var b = Math.floor(Math.random() * 256); //随机生成256以内b值
                var color=`rgb(${r},${g},${b})`
                
                $('.list-complete-item ').css({
                  background:color
                })
                var all=(this.userInfo.level>6?9:(this.userInfo.level+3))*(this.userInfo.level>6?9:(this.userInfo.level+3))
                this.userInfo.scores.rightAnswer=this.getMax(r,g,b,this.userInfo.firstChange)
                $('.list-complete-item ').eq(Math.floor(Math.random()*all)).css({
                   background:this.userInfo.scores.rightAnswer
                })
            },

            // 定时器
            timeflying(){
                clearInterval(this.userInfo.timeSet)
                this.userInfo.timeSet= setInterval(()=>{
                    this.userInfo.scores.time=(this.userInfo.scores.time-0.01).toFixed(2)
                    if(this.userInfo.scores.time<0){
                        this.userInfo.scores.time="0.00"
                        clearInterval(this.userInfo.timeSet)
                        this.userInfo.littleInfo=`i'm so sorry,time's over,your scores're ${this.userInfo.scores.scores}`
                        this.userInfo.start=!this.userInfo.start
                    }
                },10)
            },

            getMax(a,b,c,d){
                if(a>b){
                    if(a>c){
                        return `rgb(${a-d<0?"0":(a-d)}, ${b}, ${c})`
                    }else{
                        return `rgb(${a}, ${b}, ${c-d<0?"0":(c-d)})`
                    }
                }else{
                    if(b>c){
                        return `rgb(${a}, ${b-d<0?"0":(b-d)}, ${c})`
                    }else{
                        return `rgb(${a}, ${b}, ${c-d<0?"0":(c-d)})`
                    }
                }
            },
            // 随机切歌
            changeSong(){
                this.backgroundMp3=this.Mp3Array[Math.floor(Math.random()*this.Mp3Array.length)]
                var setTime=setTimeout(()=>{
                    this.backgroundMp3=this.Mp3Array[Math.floor(Math.random()*this.Mp3Array.length)]
                },this.backgroundMp3.playTime)
            },

            start() {
                this.changeSong()
                this.userInfo.start = true
                this.userInfo.level=0
                this.userInfo.firstChange=20
                this.userInfo.items=[]
                this.add(9)
                this.userInfo.scores={
                        scores: 0,   //分数
                        chances: 5,  //机会(生命)
                        time: 10,    //剩余时间(s)
                        rightAnswer:null,  //正确的
                    }
                this.changeColor()
                this.timeflying()
            }
        },
        mounted() {
            
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped src="../../../../assets/css/Games/colorfulColor.css">
    
</style>